<template>
    <div>
       <!-- tab栏 -->
      	 <div class="head">
	        <image :src="src1" class="headd" resize="cover" @click="back()"></image>
	        <text class="head1">帮助文档</text>
      	 </div>
	     <div class="search_key">
	        <image :src="src2" class="search_img"></image>
	        <input type="text" placeholder="在这里输入您的问题哦" class="search_inp" />
	    </div>
	    <div class="mine_question">
	    	<text class="que1" :class="que" @click="que1()">常见问题</text>
	    	<text class="que1" :class="que3" @click="que2()">所有问题</text>
	    </div>
	    <div class="list" v-for="( index,item ) in list" :key="index.item">
	        <image :src="index.src" class="mine_img"></image>
	        <text class="my_id">{{index.content}}</text>
      	</div>
    </div>
</template>
<style scoped>
  .head{
      width: 100%;
      height: 48px;
      padding-top: 12px;
      box-sizing: border-box;
      line-height: 32px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      box-shadow: 1px 1px 1px #ccc;
      background-color: #fff;
      /*margin-bottom: 30px;*/
    }
    .headd{
      width: 15px;
      height: 20px;
      position: absolute;
      left: 12px;
    }
    .head1{
      font-size: 20px;
      font-weight: bold;
      color: #33c179;
    }
    .mine_question{
    	width: 100%;
    	height: 25px;
    	margin-top: 19px;
    	flex-direction: row;
    	margin-bottom: 49px;
    }
    .que1{
    	height: 25px;
    	line-height: 25px;
    	font-size: 14px;
    	color: #000;
    	margin-left: 41px;
    }
    .que2{
    	height: 25px;
    	line-height: 25px;
    	font-size: 14px;
    	color: #000;
    	margin-left: 25px;
    }
    .que{
    	width: 88px;
    	text-align: center;
    	color: #33c179;
    	border-radius: 25px;
    	border: solid 1px #33c179;
    }
    .list{
      width: 100%;
      height: 49px;
      border-bottom: solid 1px #dcdada;
      align-items: center;
      flex-direction: row;
    }
    .mine_img{
      width: 14px;
      height: 17px;
      /*background-color: pink;*/
      margin-left: 12px;
   }
   .my_id{
      margin-left: 17px;
      height: 49px;
      line-height: 49px;
      color: #ccc;
      font-weight: bold;
      color: #666;
      font-size: 14px;
  }
  .search_key{
        width: 300px;
        height: 37px;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 18px;
        /*background-color: pink;*/
        position: relative;
        border: solid 1px #c4c4c4;
    }
    .search_img{
        width: 15px;
        height: 15px;
        position: absolute;
        left: 48px;
        top: 10px;
        z-index: 2;
    }
    .search_inp{
        width: 200px;
        height: 17px;
        line-height: 17px;
        font-size: 13px;
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 20px;
    }
</style>
<script>
  export default {
    data () {
        return {
            src1: 'http://192.168.2.123:8080/img/index_back.png',//返回
            src_my_admin: 'http://192.168.2.123:8080/img/set_DOC.png', //帮助文档图标
            src_my_admin1: 'http://192.168.2.123:8080/img/set_massage.png', //消息提醒文档
            src_my_admin2: 'http://192.168.2.123:8080/img/set_instruction.png', //关于我们图标
            src2: 'http://192.168.2.123:8080/img/shopping_search.png',
            que: 'que',
            que3: '',
            list: [
            	{
            		src: 'http://192.168.2.123:8080/img/help_number.png',
            		content: '编辑店铺相关'
            	},
            	{
            		src: 'http://192.168.2.123:8080/img/help_number.png',
            		content: '上架商品'
            	},
            	{
            		src: 'http://192.168.2.123:8080/img/help_number.png',
            		content: '账号相关'
            	},
            	{
            		src: 'http://192.168.2.123:8080/img/help_number.png',
            		content: '评价相关'
            	},
            	{
            		src: 'http://192.168.2.123:8080/img/help_number.png',
            		content: '店员管理'
            	},
            	{
            		src: 'http://192.168.2.123:8080/img/help_number.png',
            		content: '业务管理'
            	},
            ]
        }
    },
    components: {
       
    },
    created () {
        
    },
    methods: {
      // 点击返回
      back(){
        this.$router.back(-1);
      },
      // 点击常见问题
      que1(){
      	this.que = 'que';
      	this.que3 = '';
      },
      // 点击所有问题
      que2(){
      	this.que3 = 'que';
      	this.que = '';
      },
    }
}
</script>